<template>
  <div id="train-agreement">
    <Agreement :contentList="contentList" :agreementTitle="agreementTitle" @doSubmit="doSubmit" :indexList="indexList">
    </Agreement>
    <commonModal ref="myModal">
      <template #default>
        <div class="wrap">
          <div class="title-wrap">
            <div class="title">约培成功！</div>
            <div class="time">
              （参培时间：<span>{{ startDate }}</span> 至 <span>{{ endDate }}</span>）
            </div>
          </div>
          <div class="desc">
            每人仅允许选择一次参培时间，提交成功后无法自助修改。如确有修改需求，请将修改原因发送到ftzhaopin@fangtian.me邮箱说明，或及时与对应HR沟通。
          </div>
          <div class="measl-title">饮食调查</div>
          <MealsModal @cancel="myModal.show = false" :mealsMap='{}' @confirm="onSubmit"></MealsModal>
        </div>
      </template>
    </commonModal>
  </div>
</template>

<script setup lang="ts">
import commonModal from '../index/commonModal.vue';
import Agreement from '../../components/Agreement.vue';
import type { Rule } from 'ant-design-vue/es/form';
import { message } from 'ant-design-vue';
import MealsModal from '../index/MealsModal.vue';
import apis from "../../api/index";
const { uploadTrainingAgreement, joinTrainingNumber } = apis;
import { useStore } from '@/store';
const store = useStore();
const { resumeInfo, resumeProcess } = store as any;
const router = useRouter();
const route = useRoute();
const query = route.query as any;
const { trainingNumberId, resumesId, timeRange } = query
const startDate = ref<string>('6月9日');
const endDate = ref<string>('6月12日');
const myModal = ref<typeof commonModal>(commonModal);

const contentList = ref<string[]>([
  '甲方（提供培训方）：方田教育',
  `乙方（接受培训方）：${resumeInfo.userName}`,
  `联系方式：${resumeInfo.phone}`,
  `地址：安徽省合肥市蜀山区怀宁路288号置地广场A座`,
  `身份证号码：${resumeInfo.certificateNumber}`,
  '为帮助乙方快速提升教学能力、掌握教师岗位必备工作技能，甲方特组织新田计划特训营，由甲方对乙方进行候选人教学能力培训，经甲、乙双方充分协商，自愿达成如下共识，特订立本协议，以资恪守。',
  '一、培训时间',
  `${timeRange}`,
  '乙方逾期未参加培训视为乙方自动放弃，乙方若因不可抗力不能按期参加培训，另行协商解决。',
  '二、培训地点',
  '安徽省合肥市',
  '三、培训费用',
  '特训营期间课程及师资费用，交通住宿及餐饮均由甲方提供，不向乙方收取其他任何费用。',
  '四、甲方的权利和义务:',
  '4.1 甲方负责提供培训场地、设备设施、培训课程等用于开展培训；',
  '4.2 甲方设置培训内容、安排培训日程、组织培训活动、进行培训考核；',
  '4.3 甲方对乙方在培训活动之外的行为不承担责任。',
  '五、乙方的权利和义务',
  '5.1 培训期间，乙方须接受甲方的各项管理规定，遵守培训纪律，如有违反，甲方可对乙方提出劝退，提前结束对乙方的培训：',
  '5.2 乙方在培训期间未经甲方允许，不得私自外出，由此产生的一切后果及造成的任何安全事故、意外事件，均由乙方自行全部承担，与甲方无关，由此造成甲方相关损失的，由乙方全部承担，涉及到相关法律法规的，将追究其相关法律法规责任。',
  '5.3 甲方提供的内部教材、知识产权和软件系统等仅限培训期间乙方本人使用，未经甲方同意，乙方不得以任何形式或载于任何载体，以口头、图像或书面等方式向第三方披露。如违反此条款给甲方造成任何损失，乙方应承担赔偿责任。',
  '六、其他',
  '1.乙方若因自身原因放弃或中途退出培训，视为乙方自愿放弃参与新田计划特训营、自愿放弃候选人身份；',
  '2.本协议一式贰份，甲、乙双方各执壹份；',
  '3.本协议自甲乙双方签字盖章之日起生效，培训结束或乙方因故退出时，协议自动终止。',
  '4.本协议未尽事宜，甲、乙双方共同协商解决。',
]);
const agreementTitle = ref<string>('方田教育新田计划特训营培训协议');
const indexList = ref<number[]>([6, 9, 11, 13, 17, 21]);

interface FormState {
  meals: string;
  diet: string;
}


const rules: Record<string, Rule[]> = {
  meals: [{ required: true, message: '请选择口味', trigger: 'change' }],
  diet: [{ required: true, message: '请输入忌口食物', trigger: 'change' }],
};


const onSubmit = async (val) => {
  const { diet, meals } = val
  const data: any = await joinTrainingNumber({ trainingNumberId, resumesId, trainingUrl: trainingUrl.value, notEat: diet, taste: meals,'editType': 1 });
  if (data && data.code === '10000') {
    message.success('填写成功');
    myModal.value.show = false;
  } else {
    message.error(data.msg)
  }
};
const trainingUrl = ref<string>("");
const doSubmit = async (val: File) => {
  console.log(val, 'trainargreement');
  const formdata = new FormData();
  formdata.append('trainingNumberId', query.trainingNumberId)
  formdata.append('resumesId', query.resumesId)
  formdata.append('file', val)
  const data: any = await uploadTrainingAgreement(formdata);
  console.log(data, '-====>data')
  if (data && data.code === '10000') {
    trainingUrl.value = data.data
    const joindata: any = await joinTrainingNumber({
      "trainingNumberId": query.trainingNumberId,
      "resumesId": query.resumesId,
      "taste": null,
      "notEat": null,
      "trainingUrl": data.data,
    })
    if (joindata.code === "10000") {
      myModal.value.show = true;
    } else {
      message.error(joindata.msg)
    }

    //onSubmit({ diet: "", meals: "" })
  } else {
    message.error(data.msg)
  }
  // router.push({
  //   path: '/delivered',
  //   query: {
  //     identifier: 'train',
  //   },
  // });
};
</script>

<style lang="scss" scoped>
.wrap {
  position: absolute;
  top: 27px;
  left: 20px;
  width: 520px;

  .title-wrap {
    display: flex;
    align-items: center;

    .title {
      font-weight: 500;
      font-size: 24px;
      color: #2c3a50;
    }

    .time {
      font-weight: 400;
      font-size: 16px;
      color: #333333;

      span {
        color: #f96a6b;
      }
    }
  }

  .desc {
    font-weight: 400;
    font-size: 14px;
    color: #b3c0c8;
    line-height: 28px;
    margin: 8px 0 19px 0;
  }

  .measl-title {
    font-weight: 400;
    font-size: 20px;
    color: #333333;
    line-height: 23px;
    margin-bottom: 23px;
  }
}

.btn-area {
  margin-top: 30px;
  display: flex;
  justify-content: center;
  gap: 20px;
}
</style>
